import React from "react";
import Sortable from 'sortablejs';
import { Input,Row,Col,Icon } from 'antd'
import styles from '../index.less'
import text from "@/assets/homeImgV2/text.png"
import picture from "@/assets/homeImgV2/picture.png"
import tag from "@/assets/homeImgV2/tag.png"
import cols from "@/assets/homeImgV2/cols.png"


class FieldSetLeft extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      formFields:[],
      apiFields:[]
    }
  }

  componentDidMount(){
    var el = document.getElementById('fieldItems');
    var sortable = Sortable.create(el,{
      group: {
        name: 'shared',
        pull: 'clone',
        put: false // 不允许拖拽进这个列表
      },
      animation: 150,
      sort: false, // 设为false，禁止sort
      dragoverBubble:true,
    });

    var el2 = document.getElementById('controlItems');
    var sortable = Sortable.create(el2,{
      group: {
        name: 'shared',
        pull: 'clone',
        put: false // 不允许拖拽进这个列表
      },
      animation: 150,
      sort: false, // 设为false，禁止sort
      dragoverBubble:true,
    });

    var el3 = document.getElementById('apiItems');
    var sortable = Sortable.create(el3,{
      group: {
        name: 'shared',
        pull: 'clone',
        put: false // 不允许拖拽进这个列表
      },
      animation: 150,
      sort: false, // 设为false，禁止sort
      dragoverBubble:true,
    });
    
  }

  render(){
    const { leftFieldList,leftApiList } = this.props;
    return(
      <div className={styles.cardLeft}>
        <Row>
          <Col span={24}>表单字段</Col>
        </Row>
        <Row id="fieldItems" gutter={[10,10]}>
          {
            leftFieldList.map(item => {
              return (
                <Col key={item.id} span={12} className='form'>
                  <div className={styles.fieldItem}>&#60;{item.name}&#62;</div>
                </Col>
              )
            })
          }
        </Row>

        <Row>
          <Col span={24}>控件</Col>
        </Row>
        <Row id="controlItems" gutter={[10,10]}>
          <Col span={8} className="text">
            <div className={styles.fieldItem}>
              <img src={text} />
              <div>文本域</div>
            </div>
          </Col>
          <Col span={8} className="picture">
            <div className={styles.fieldItem}>
              <img src={picture} />
              <div>图片</div>
            </div>
          </Col>
          <Col span={8} className="tag">
            <div className={styles.fieldItem}>
              <img src={tag} />
              <div>标签</div>
            </div>
          </Col>
          {
            // <Col span={6} className="cols">
            //   <div className={styles.fieldItem}>
            //     <img src={cols} />
            //     <div>栅格</div>
            //   </div>
            // </Col>
          }
        </Row>
      
        <Row>
          <Col span={24}>当前接口字段（建议选择）</Col>
        </Row>
        <Row id="apiItems" gutter={[10,10]}>
          {
            leftApiList.map(f => {
              return (
                <Col key={f.id} span={12} className='api'>
                  <div className={styles.fieldItem}>&#60;{f.nameZh}&#62;</div>
                </Col>
              )
            })
          }
        </Row>
        
      </div>
    )
  }
}

export default FieldSetLeft;
